<template>
  <view class="identity need_scroll_top_view">
    <view class="h20"></view>
    <view class="top">法人身份证</view>
    <view class="cont">
      <view class="up-box" :class="{border: !imageFront}" @click="updateFile('front')">
        <block v-if="!imageFront">
          <image :src="$store.state.imgBaseUrl + '/id.png'" class="none"></image>
          <view>上传身份证正面</view>
        </block>
        <image :src="imageFront" class="boradius" v-else></image>
      </view>
      <view class="up-box" :class="{border: !imageVerso}" @click="updateFile('verso')" v-if="imageFront">
        <block v-if="!imageVerso">
          <image :src="$store.state.imgBaseUrl + '/id.png'" class="none" ></image>
          <view>上传身份证反面</view>
        </block>
        <image :src="imageVerso" class="boradius" v-else></image>
      </view>
    </view>
    <view class="text1">
      注：拍摄时请确保证件<text class="line">边框完整，字体清晰，亮度均匀</text>
    </view>
    <block v-if="imageFront || imageVerso">  
      <text class="text2">请确认您的个人信息，若有误请点击修改</text>
      <view class="row">
        <text class="tit">姓名</text>
        <view class="text3">
          <input type="text" v-model="info.name" @blur="backFixationTop()"/>
        </view>
      </view>
      <view class="row">
        <text class="tit">身份证</text>
        <view class="text3">
          <input type="text" v-model="info.id" @blur="backFixationTop()"/>
        </view>
      </view>
    </block>
    <view class="footer">
      <button type="primary" class="sub-btn cur" plain="true" @click="gotoPage">确认保存</button>
    </view>
  </view>
</template>
<script>
import {uploadFile} from "@/unit/common.js"
import { discernCard } from "@/service/join/join.service.js"
import formValid from '@/unit/graceChecker.js'
import { scrollToTargetPosition } from '@/mixin/index.mixin.js'
export default {
  mixins: [scrollToTargetPosition],
  data() {
    return {
      type: null, // 加盟类型
      isId: 0,
      grade: null,
      isBack: false,
      imageFront: null, //身份正面
      imageVerso: null, // 身份反面
      idCardImage1: null,
      idCardImage2: null,
      isFrontUpdate: false,
      getJoinDatas: null,
      info: { // 身份信息
        name: '',
        id: ''
      }
    };
  },
  onLoad:function(option){
    this.type = option.type;
  },
  mounted() {
    this.initDraw()
  },
  activated () {
    this.initDraw()
  },
  methods: {
    initDraw () {
      this.getJoinDatas = uni.getStorageSync('joinInfo');
      if (!this.getJoinDatas) {
        uni.showToast({
          title: '请先选择加盟类型',
          icon: 'none',
          duration: 2000,
          success: () => {
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/subsidiaryJoin/index'
              })
            }, 2000);
          }
        });
      }
    },
    gotoPage () {
      if (!this.imageFront || !this.imageVerso) {
        uni.showToast({
          title: '请上传身份证正反面',
          icon: 'none'
        });
        return false
      }
      let rule = [
        {name:'name', checkType: 'notnull', checkRule:'', errorMsg:'请完善身份信息'},
        {name:'id', checkType: 'notnull', checkRule:'', errorMsg:'请完善身份信息'}
      ];
      var checkRes = formValid.check(this.info, rule);
      if (!checkRes) {
        uni.showToast({ title: formValid.error, icon: "none" });
        return false;
      }
      let params = {
        realname: this.info.name,
        idCardNumber: this.info.id,
        idCardImage1: this.idCardImage1,
        idCardImage2: this.idCardImage2
      }
      this.grade ? params['rank'] = this.grade : ''; // 存储等级
      uni.setStorage({
        key: 'joinInfo',
        data: {...params, ...this.getJoinDatas},
        success: () => {
          uni.navigateTo({
            url: '/pages/subsidiaryJoin/joinEntrance?type=' + this.type + '&isId=' + this.isId
          })
        }
      })
    },
    updateFile (type) {
      uploadFile({success: (obj) => {
        if (obj.status == 0) {
          if (type == 'front') {
            this.getInfo(0, obj.data.url, obj.data.id) // 0=>正面
          } else {
            this.getInfo(1, obj.data.url, obj.data.id) // 1=>反面
          }
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      }})
    },
    getInfo (type, url, id) {
      let params = {
        id: id,
        appliedType: this.getJoinDatas.appliedType,
        isFace: type,
        url: url
      }
      discernCard(params, (res) => {
        if (res.status == 0) {
          this.isId = 1;
          if (type == 0) {
            this.isFrontUpdate = true;
            this.info.name = res.data.name;
            this.info.id = res.data.num;
            this.idCardImage1 = id;
            this.imageFront = url;
          } else {
            this.isBack = true;
            this.imageVerso = url;
            this.idCardImage2 = id;
          }
        } else {
          if (type == 0) {
            this.idCardImage1 = '';
            this.imageFront = '';
            this.isFrontUpdate = false;
            this.info.name = '';
            this.info.id = '';
          } else {
            this.imageVerso = '';
            this.idCardImage2 = '';
            this.isBack = false;
          }
          this.isId = 0;
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
image {
  width: 100%;
  height: 100%;
}
.h20 {
  height: 20rpx;
}
.identity {
  height: 100vh;
  background-color: #FFFFFF;
  padding: 0 30rpx;
  color: #333333;
  .top {
    font-size: 36rpx;
    color: #333333;
    text-indent: 2rpx;
    padding-top: 42rpx;
  }
  .cont {
    margin-top: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .up-box {
      width: 330rpx;
      height: 200rpx;
      color: #666666;
      font-size: 24rpx;
      text-align: center;
      border-radius: 16rpx;
      .none {
        width: 79rpx;
        height: 79rpx;
        display: block;
        margin: 35rpx auto 29rpx;
      }
      &:first-of-type {
        margin-right: 27rpx;
      }
      .boradius {
        border-radius: 16rpx;
      }
      &.border {
        border: 1px dashed #E1E1E1;
      }
    }
  }
  .text1 {
    font-size: 22rpx;
    margin-top: 33rpx;
    .line {
      color: #C2AC78;
    }
  }
  .text2 {
    display: block;
    font-size: 22rpx;
    color: #666666;
    margin-top: 42rpx;
  }
  .row{
  	display: flex;
  	align-items: center;
  	padding: 30rpx 0;
    border-bottom: 1px solid #E1E1E1;
    font-size: 28rpx;
  	.tit{
  		flex-shrink: 0;
  		width: 120rpx;
      margin-right: 30rpx;
  	}
  	.text3{
  		flex: 1;
  		font-size: 28rpx;
      color: #333333;
  	}
  }
  .footer {
    width: 100%;
    border-top: 1px solid #E1E1E1;
    padding: 14rpx 0 20rpx;
    background-color: #FFFFFF;
    position: absolute;
    bottom: 0;
    left: 0;
    button {
      height: 70rpx;
      margin: 0 32rpx;
      background-color: #636363;
      line-height: 70rpx;
      font-size: 30rpx;
      color: #ADA697;
      border: none;
      &.cur {
        color: #F6DA99;
        background-color: #434343;
      }
    }
  }
}
</style>
